"use client"

import { MoreHorizontal } from "lucide-react"
import * as React from "react"

import { Button } from "~/registry/miami/ui/button"
import {
   Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
   CommandList,
} from "~/registry/miami/ui/command"
import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
} from "~/registry/miami/ui/dropdown-menu"

const labels = [
   "feature",
   "bug",
   "enhancement",
   "documentation",
   "design",
   "question",
   "maintenance",
]

export default function ComboboxDropdownMenu() {
   const [label, setLabel] = React.useState("feature")
   const [open, setOpen] = React.useState(false)

   return (
      <div className="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
         <p className="text-sm font-medium leading-none">
            <span className="bg-primary text-primary-foreground mr-2 rounded-lg px-2 py-1 text-xs">
               {label}
            </span>
            <span className="text-muted-foreground">Create a new project</span>
         </p>
         <DropdownMenu open={open} onOpenChange={setOpen}>
            <DropdownMenuTrigger asChild>
               <Button variant="ghost" size="sm">
                  <MoreHorizontal />
               </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-[200px]">
               <DropdownMenuLabel>Actions</DropdownMenuLabel>
               <DropdownMenuGroup>
                  <DropdownMenuItem>Assign to...</DropdownMenuItem>
                  <DropdownMenuItem>Set due date...</DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuSub>
                     <DropdownMenuSubTrigger>
                        Apply label
                     </DropdownMenuSubTrigger>
                     <DropdownMenuSubContent className="p-0">
                        <Command>
                           <CommandInput
                              placeholder="Filter label..."
                              autoFocus
                              className="h-9"
                           />
                           <CommandList>
                              <CommandEmpty>No label found.</CommandEmpty>
                              <CommandGroup>
                                 {labels.map((label) => (
                                    <CommandItem
                                       key={label}
                                       value={label}
                                       onSelect={(value) => {
                                          setLabel(value)
                                          setOpen(false)
                                       }}
                                    >
                                       {label}
                                    </CommandItem>
                                 ))}
                              </CommandGroup>
                           </CommandList>
                        </Command>
                     </DropdownMenuSubContent>
                  </DropdownMenuSub>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem className="text-red-600">
                     Delete
                     <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
                  </DropdownMenuItem>
               </DropdownMenuGroup>
            </DropdownMenuContent>
         </DropdownMenu>
      </div>
   )
}
